﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>商城购物</title>
		<link rel="stylesheet" type="text/css" href="http://localhost:8080/onlineshop/css/style.css">
		<link rel="stylesheet" type="text/css" href="http://localhost:8080/onlineshop/css/tubiao.css">

		<style type="text/css">
			.warp{
				width:1226px;
				height:460px;

				position: relative;
			}
			.list{
				width:1226px;
				height:460px;;
				list-style: none;
				position: relative;
				padding-left: 0px;
			}
			.item{
				position: absolute;
				width: 100%;
				height: 100%;
				color: white;
				font-size: 50px;
				opacity: 0;
				transition: all .8s;
			}
			.item:nth-child(1)
			{
				background-color: black;
			}
			.item:nth-child(2)
			{
				background-color: yellow;
			}
			.item:nth-child(3)
			{
				background-color: blue;
			}
			.btn{
				width:50px;
				height: 100px;
				position: absolute;
				top: 150px;
				z-index:100;
				background-color: rgba(255,255,255,0.3);
				border: none;
			}

			.btnp{
				color: rgba(102, 78, 78, 0.6);
				font-size: 40px;
			}
			#goPre{
				left: 0px;
			}
			#goNext{
				right: 0px;
			}

			.item.active{
				z-index: 10;
				opacity: 1;
			}

			.pointList{
				padding-left: 0px;
				list-style: none;
				position: absolute;
				right: 20px;
				bottom: 20px;
				z-index: 1000;
			}
			.point{
				width: 8px;
				height: 8px;
				background-color: rgba(0,0,0,0.4);
				border-radius: 100%;
				float: left;
				margin-right: 14px;
				border: solid;
				border-width: 2px;
				border-color: rgba(255,255,255,0.6);

				cursor: pointer;
			}

			.point.active{
				background-color: rgba(255,255,255,0.8);

			}
		</style>
	</head>
	<body>
	<jsp:forward page="/mvc/showProductList.do"></jsp:forward>
</body>
</html>